<template>
  <div class="course-message">
    <div class="course-div detaild">
      <div>
        <p class="course-title">
          <level :level="item.level" />
          <span class="class-name">{{item.classAliasName || item.className}}</span>
          <!-- <em class="season">({{item.periodName}})</em> -->
          <em class="season">({{item.periodNo}}期)</em>
        </p>
      </div>
      <p
        class="course-teacher"
        v-if="showTeacher"
      >
        <span>任教老师：{{item.teacherName}}</span>
      </p>
      <p
        class="course-mes"
        v-if="item.periodNo=='85'||(item.periodNo=='1'&&item.areaTeamId=='1714461766180220928')"
      >
        <img src="../../assets/img/home/calendar.png" />
        <span>{{item.startCourseTime | formatDate('MM月DD日')}}</span>
        <!-- <span v-if="startLecture&&endLecture">( 共{{item.lectureAmount}}讲 )</span> -->
        <span v-if="startLecture&&endLecture"></span>
      </p>
      <p class="course-mes">
        <img src="../../assets/img/home/clock.png" />
        <span>{{item.timeInterval || item.classDateTip}} {{item.studyingTime}}</span>
      </p>
      <p class="course-mes">
        <template v-if="item.campusAddress || item.campusName">
          <img src="../../assets/img/home/location.png" />
          <span>{{item.campusAddress || item.campusName}}</span>
        </template>
        <span
          v-if="showMoney"
          class="money"
        >
          <em>¥</em>{{item.studyingFee|formatNumber(2)}}
        </span>
      </p>
      <!-- <p class="course-mes" v-if="startLecture&&endLecture">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiangci"></use>
                </svg>
                <span>报读讲次：{{startLecture }} ~ {{endLecture}}</span>
            </p> -->
      <!--<div v-if="item.classType==='1'" class="course-status">
                <span class="number">
                    <em>{{item.registrationNumber}}</em>/{{item.quotaMax}}
                </span>
                <span class="course-rest">
                    {{item.quotaMin}}人报名可开班
                </span>
                <span class="money">
                    ￥{{ item.studyingFee | formatNumber(2)}}
                </span>
            </div>
            <div v-else class="course-status">
                <span class="number">
                    还有<em>{{item.quota - item.regAmount}}</em>个名额
                </span>
                <span class="money">
                    ￥{{ item.studyingFee | formatNumber(2)}}
                </span>
            </div>-->
    </div>
  </div>
</template>

<script>
import Level from './Level.vue'
export default {
  name: 'course-message',
  props: {
    item: {},
    hasAddress: {},
    showTeacher: {
      default: false
    },
    showMoney: {
      default: false
    },
    startLecture: '',
    endLecture: '',
    hasPeriodNo: {
      default: true
    }
  },
  components: {
    Level
  },
  data: function() {
    return {
      title: '提示'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@images: '../../assets/img';
.course-message {
  padding-bottom: 50px;
  padding-top: 40px;
  position: relative;
  background: white;
  display: flex;
  display: -webkit-flex;
}
.course-div {
  display: inline-block;
  font-size: 24px;
  color: #646464;
  width: 100%;
}
.course-div.detail {
  flex: 1;
  -webkit-box-flex: 1;
}
.course-div.head {
  width: 200px;
  text-align: center;
  position: relative;
}
.course-div.head .headImg {
  width: 120px;
  height: 120px;
  border-radius: 120px;
  border: 2px solid #eee;
  /*margin-left: 3rem;*/
}
.course-div.head .diamond {
  position: absolute;
  top: 100px;
  right: 40px;
  width: 32px;
}
.zhongchou {
  position: absolute;
  top: 0;
  right: 30px;
  width: 52px;
}
.course-title {
  color: #333333;
  margin-bottom: 24px;
  line-height: 38px;
  padding-right: 30px;
}
.course-title .class-name {
  font-size: 36px;
}
.course-title .course-tag {
  width: 68px;
  height: 40px;
  line-height: 34px;
  font-size: 24px;
  color: #fff;
  text-align: center;
  background: url('@{images}/home/grade.png') no-repeat;
  background-size: 100%;
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
  margin-top: 2px;
}
.course-title span {
}
.course-title em {
  color: #ff6600;
  font-size: 28px;
  /* line-height: 2.8rem; */
  vertical-align: top;
  margin-left: 10px;
}
.course-teacher {
  margin-top: -27px;
}
.course-mes {
  font-size: 24px;
  line-height: 24px;
  height: 24px;
  margin-top: 18px;
  .icon {
    font-size: 28px;
  }
}
.course-mes span {
  vertical-align: top;
  position: relative;
  top: 2px;
  margin-left: 6px;
}
.course-mes img {
  width: 24px;
}
.money {
  text-align: right;
  color: #ff544c;
  font-size: 36px;
  font-weight: 500;
  padding-right: 30px;
  /* border-top: 2px dashed #ddd; */
  /* margin-top: 2.6rem; */
  margin-bottom: -15px;
  /* padding-top: 2rem; */
  float: right;
  em {
    font-size: 32px;
  }
}
.course-status {
  margin-top: 30px;
  height: 70px;
  line-height: 70px;
  border-top: 2px dashed #f2f2f2;
}
.course-status .number em {
  color: #ff6600;
}
.course-status .course-rest {
  margin-left: 20px;
}
.course-status .money {
  color: #ff6600;
  font-size: 30px;
  float: right;
  clear: both;
  position: relative;
  right: 30px;
  font-weight: bold;
}
.season {
  /* background: #ff7700; */
  color: #333 !important;
  border-radius: 8px !important;
  font-size: 28px !important;
  padding: 0 4px !important;
  display: inline-block;
}
</style>
